import headss from '../../components/header/index.vue'
import Vue from 'vue'
import BScroll from '@better-scroll/core'
import { Lazyload, Swipe, SwipeItem,Rate } from 'vant'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import ScrollBar from '@better-scroll/scroll-bar'
BScroll.use(ScrollBar)
Vue.use(Lazyload)
export default {
  name:'jiyang',
  data:function(){
    return {
      value: 3,
      swiperOption: {
        direction: 'vertical',
        slidesPerView: 'auto',
        freeMode: true,
        scrollbar: {
          el: '.swiper-scrollbar'
        },
        mousewheel: true,
        on: {
          touchEnd: function(swiper,event){
            //你的事件
            console.log('我到底了')
          },
        },
      },
      images: [
        'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a8af0c1f655f0011bb51f4/61c94cba1158630011a4e26c/16406704932698007257.png',
        'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a8af0c1f655f0011bb51f4/61c94cba1158630011a4e26c/16406704932698007257.png',
        'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a8af0c1f655f0011bb51f4/61c94cba1158630011a4e26c/16406704932698007257.png',
        'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a8af0c1f655f0011bb51f4/61c94cba1158630011a4e26c/16406704932698007257.png'
      ],	
      list:[{
        image:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a8af0c1f655f0011bb51f4/61c94cba1158630011a4e26c/16406704915125197715.png',
        name:"淘气联盟宠物店",
        dress:'丰台长丰园和顺家园底商B23-89',
        juli:'3.55km'
      },{
        image:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a8af0c1f655f0011bb51f4/61c94cba1158630011a4e26c/16406704926753712403.png',
        name:"喵喵幼稚园",
        dress:'丰台长丰园和顺家园底商B23-89',
        juli:'3.55km'
      },{
        image:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a8af0c1f655f0011bb51f4/61c94cba1158630011a4e26c/16406704928180408293.png',
        name:"淘气联盟宠物店",
        dress:'丰台长丰园和顺家园底商B23-89',
        juli:'3.55km'
      },{
        image:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a8af0c1f655f0011bb51f4/61c94cba1158630011a4e26c/16406704929417822702.png',
        name:"淘气联盟宠物店",
        dress:'丰台长丰园和顺家园底商B23-89',
        juli:'3.55km'
      },{
        image:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a8af0c1f655f0011bb51f4/61c94cba1158630011a4e26c/16406704929417822702.png',
        name:"淘气联盟宠物店",
        dress:'丰台长丰园和顺家园底商B23-89',
        juli:'3.55km'
      },{
        image:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a8af0c1f655f0011bb51f4/61c94cba1158630011a4e26c/16406704929417822702.png',
        name:"淘气联盟宠物店",
        dress:'丰台长丰园和顺家园底商B23-89',
        juli:'3.55km'
      },{
        image:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a8af0c1f655f0011bb51f4/61c94cba1158630011a4e26c/16406704929417822702.png',
        name:"淘气联盟宠物店",
        dress:'丰台长丰园和顺家园底商B23-89',
        juli:'3.55km'
      }],
      scroll:0
    }
  },
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Rate.name]: Rate,
    headss,
    Swiper,
    SwiperSlide,
  },
  mounted() {
    this.init()
  },
  activated(){
    console.log('我进来了')
    // alert(this.scroll,'大傻逼')
     this.bs.refresh()
    this.bs.scrollTo(0,this.scroll, 0)
    // this.bs.refresh()
  },
  deactivated(){
    console.log(this.bs.y)
    this.scroll = this.bs.y
    console.log('我离开了')
  },
  beforeDestroy() {
    this.bs.destroy()
  },
  methods: {
    init() {  
      this.bs = new BScroll(this.$refs.scroll, {
        probeType: 1,
        click: true,
        scrollY: true,
        scrollbar:true
      })
      this.bs.on('scrollStart', () => {
        console.log('scrollStart-')
      })
      this.bs.on('scroll', ({ y }) => {
        console.log('scrolling-')
      })
      this.bs.on('scrollEnd', (pos) => {
        console.log(pos)
      }) 
    },
    clickHandler (item) {
      window.alert(item)
    },
    goto(){
      this.$router.go(-1)
    }
  }
}
